<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>管理后台</title>
<head th:include="amazeui/include :: header"></head>
<body data-type="index">
      
        <!-- 内容区域 -->

            <div class="container-fluid am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 部件首页 <small>Amaze UI</small></div>
                        <p class="page-header-description">Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件。</p>
                    </div>
                    <div class="am-u-lg-3 tpl-index-settings-button">
                        <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button>
                    </div>
                </div>

            </div>

            <div class="row-content am-cf">
                <div class="row  am-cf">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-4">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">月度财务收支计划</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body am-fr">
                                <div class="am-fl">
                                    <div class="widget-fluctuation-period-text">
                                        ￥61746.45
                                        <button class="widget-fluctuation-tpl-btn">
                        <i class="am-icon-calendar"></i>
                        更多月份
                      </button>
                                    </div>
                                </div>
                                <div class="am-fr am-cf">
                                    <div class="widget-fluctuation-description-amount text-success" am-cf>
                                        +￥30420.56

                                    </div>
                                    <div class="widget-fluctuation-description-text am-text-right">
                                        8月份收入
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <div class="widget widget-primary am-cf">
                            <div class="widget-statistic-header">
                                本季度利润
                            </div>
                            <div class="widget-statistic-body">
                                <div class="widget-statistic-value">
                                    ￥27,294
                                </div>
                                <div class="widget-statistic-description">
                                    本季度比去年多收入 <strong>2593元</strong> 人民币
                                </div>
                                <span class="widget-statistic-icon am-icon-credit-card-alt"></span>
                            </div>
                        </div>
                    </div>
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <div class="widget widget-purple am-cf">
                            <div class="widget-statistic-header">
                                本季度利润
                            </div>
                            <div class="widget-statistic-body">
                                <div class="widget-statistic-value">
                                    ￥27,294
                                </div>
                                <div class="widget-statistic-description">
                                    本季度比去年多收入 <strong>2593元</strong> 人民币
                                </div>
                                <span class="widget-statistic-icon am-icon-support"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row am-cf">
                    <div class="am-u-sm-12 am-u-md-8">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">月度财务收支计划</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="tpl-echarts">

                            </div>
                        </div>
                    </div>

                    <div class="am-u-sm-12 am-u-md-4">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">专用服务器负载</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body widget-body-md am-fr">

                                <div class="am-progress-title">CPU Load <span class="am-fr am-progress-title-more">28% / 100%</span></div>
                                <div class="am-progress">
                                    <div class="am-progress-bar" style="width: 15%"></div>
                                </div>
                                <div class="am-progress-title">CPU Load <span class="am-fr am-progress-title-more">28% / 100%</span></div>
                                <div class="am-progress">
                                    <div class="am-progress-bar  am-progress-bar-warning" style="width: 75%"></div>
                                </div>
                                <div class="am-progress-title">CPU Load <span class="am-fr am-progress-title-more">28% / 100%</span></div>
                                <div class="am-progress">
                                    <div class="am-progress-bar am-progress-bar-danger" style="width: 35%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row am-cf">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-4 widget-margin-bottom-lg ">
                        <div class="tpl-user-card am-text-center widget-body-lg">
                            <div class="tpl-user-card-title">
                                禁言小张
                            </div>
                            <div class="achievement-subheading">
                                月度最佳员工
                            </div>
                            <img class="achievement-image" src="/amazeui/assets/img/user07.png" alt="">
                            <div class="achievement-description">
                                禁言小张在
                                <strong>30天内</strong> 禁言了
                                <strong>200多</strong>人。
                            </div>
                        </div>
                    </div>

                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-8 widget-margin-bottom-lg">

                        <div class="widget am-cf widget-body-lg">

                            <div class="widget-body  am-fr">
                                <div class="am-scrollable-horizontal ">
                                    <table width="100%" class="am-table am-table-compact am-text-nowrap tpl-table-black " id="example-r">
                                        <thead>
                                            <tr>
                                                <th>文章标题</th>
                                                <th>作者</th>
                                                <th>时间</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="gradeX">
                                                <td>新加坡大数据初创公司 Latize 获 150 万美元风险融资</td>
                                                <td>张鹏飞</td>
                                                <td>2016-09-26</td>
                                                <td>
                                                    <div class="tpl-table-black-operation">
                                                        <a href="javascript:;">
                                                            <i class="am-icon-pencil"></i> 编辑
                                                        </a>
                                                        <a href="javascript:;" class="tpl-table-black-operation-del">
                                                            <i class="am-icon-trash"></i> 删除
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="even gradeC">
                                                <td>自拍的“政治角色”：观众背对希拉里自拍合影表示“支持”</td>
                                                <td>天纵之人</td>
                                                <td>2016-09-26</td>
                                                <td>
                                                    <div class="tpl-table-black-operation">
                                                        <a href="javascript:;">
                                                            <i class="am-icon-pencil"></i> 编辑
                                                        </a>
                                                        <a href="javascript:;" class="tpl-table-black-operation-del">
                                                            <i class="am-icon-trash"></i> 删除
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="gradeX">
                                                <td>关于创新管理，我想和你当面聊聊。</td>
                                                <td>王宽师</td>
                                                <td>2016-09-26</td>
                                                <td>
                                                    <div class="tpl-table-black-operation">
                                                        <a href="javascript:;">
                                                            <i class="am-icon-pencil"></i> 编辑
                                                        </a>
                                                        <a href="javascript:;" class="tpl-table-black-operation-del">
                                                            <i class="am-icon-trash"></i> 删除
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="even gradeC">
                                                <td>究竟是趋势带动投资，还是投资引领趋势？</td>
                                                <td>着迷</td>
                                                <td>2016-09-26</td>
                                                <td>
                                                    <div class="tpl-table-black-operation">
                                                        <a href="javascript:;">
                                                            <i class="am-icon-pencil"></i> 编辑
                                                        </a>
                                                        <a href="javascript:;" class="tpl-table-black-operation-del">
                                                            <i class="am-icon-trash"></i> 删除
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="even gradeC">
                                                <td>Docker领域再添一员，网易云发布“蜂巢”，加入云计算之争</td>
                                                <td>醉里挑灯看键</td>
                                                <td>2016-09-26</td>
                                                <td>
                                                    <div class="tpl-table-black-operation">
                                                        <a href="javascript:;">
                                                            <i class="am-icon-pencil"></i> 编辑
                                                        </a>
                                                        <a href="javascript:;" class="tpl-table-black-operation-del">
                                                            <i class="am-icon-trash"></i> 删除
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>


                                            <!-- more data -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
<div th:include="amazeui/include :: footer"></div>
<script src="/amazeui/assets/js/amazeui.datatables.min.js"></script>
<script src="/amazeui/assets/js/dataTables.responsive.min.js"></script>
<script src="/amazeui/assets/js/echarts.min.js"></script>
<script src="/amazeui/assets/js/theme.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

    	// 页面数据
    	var pageData = {
    	    // ===============================================
    	    // 首页
    	    // ===============================================
    	    'index': function indexData() {
    	        $('#example-r').DataTable({

    	            bInfo: false, //页脚信息
    	            dom: 'ti'
    	        });


    	        // ==========================
    	        // 百度图表A http://echarts.baidu.com/
    	        // ==========================

    	        var echartsA = echarts.init(document.getElementById('tpl-echarts'));
    	        option = {
    	            tooltip: {
    	                trigger: 'axis'
    	            },
    	            grid: {
    	                top: '3%',
    	                left: '3%',
    	                right: '4%',
    	                bottom: '3%',
    	                containLabel: true
    	            },
    	            xAxis: [{
    	                type: 'category',
    	                boundaryGap: false,
    	                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    	            }],
    	            yAxis: [{
    	                type: 'value'
    	            }],
    	            textStyle: {
    	                color: '#838FA1'
    	            },
    	            series: [{
    	                name: '邮件营销',
    	                type: 'line',
    	                stack: '总量',
    	                areaStyle: { normal: {} },
    	                data: [120, 132, 101, 134, 90],
    	                itemStyle: {
    	                    normal: {
    	                        color: '#1cabdb',
    	                        borderColor: '#1cabdb',
    	                        borderWidth: '2',
    	                        borderType: 'solid',
    	                        opacity: '1'
    	                    },
    	                    emphasis: {

    	                    }
    	                }
    	            }]
    	        };

    	        echartsA.setOption(option);
    	    },
    	    // ===============================================
    	    // 图表页
    	    // ===============================================
    	    'chart': function chartData() {
    	        // ==========================
    	        // 百度图表A http://echarts.baidu.com/
    	        // ==========================

    	        var echartsC = echarts.init(document.getElementById('tpl-echarts-C'));


    	        optionC = {
    	            tooltip: {
    	                trigger: 'axis'
    	            },

    	            legend: {
    	                data: ['蒸发量', '降水量', '平均温度']
    	            },
    	            xAxis: [{
    	                type: 'category',
    	                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    	            }],
    	            yAxis: [{
    	                    type: 'value',
    	                    name: '水量',
    	                    min: 0,
    	                    max: 250,
    	                    interval: 50,
    	                    axisLabel: {
    	                        formatter: '{value} ml'
    	                    }
    	                },
    	                {
    	                    type: 'value',
    	                    name: '温度',
    	                    min: 0,
    	                    max: 25,
    	                    interval: 5,
    	                    axisLabel: {
    	                        formatter: '{value} °C'
    	                    }
    	                }
    	            ],
    	            series: [{
    	                    name: '蒸发量',
    	                    type: 'bar',
    	                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    	                },
    	                {
    	                    name: '降水量',
    	                    type: 'bar',
    	                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    	                },
    	                {
    	                    name: '平均温度',
    	                    type: 'line',
    	                    yAxisIndex: 1,
    	                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    	                }
    	            ]
    	        };

    	        echartsC.setOption(optionC);

    	        var echartsB = echarts.init(document.getElementById('tpl-echarts-B'));
    	        optionB = {
    	            tooltip: {
    	                trigger: 'axis'
    	            },
    	            legend: {
    	                x: 'center',
    	                data: ['某软件', '某主食手机', '某水果手机', '降水量', '蒸发量']
    	            },
    	            radar: [{
    	                    indicator: [
    	                        { text: '品牌', max: 100 },
    	                        { text: '内容', max: 100 },
    	                        { text: '可用性', max: 100 },
    	                        { text: '功能', max: 100 }
    	                    ],
    	                    center: ['25%', '40%'],
    	                    radius: 80
    	                },
    	                {
    	                    indicator: [
    	                        { text: '外观', max: 100 },
    	                        { text: '拍照', max: 100 },
    	                        { text: '系统', max: 100 },
    	                        { text: '性能', max: 100 },
    	                        { text: '屏幕', max: 100 }
    	                    ],
    	                    radius: 80,
    	                    center: ['50%', '60%'],
    	                },
    	                {
    	                    indicator: (function() {
    	                        var res = [];
    	                        for (var i = 1; i <= 12; i++) {
    	                            res.push({ text: i + '月', max: 100 });
    	                        }
    	                        return res;
    	                    })(),
    	                    center: ['75%', '40%'],
    	                    radius: 80
    	                }
    	            ],
    	            series: [{
    	                    type: 'radar',
    	                    tooltip: {
    	                        trigger: 'item'
    	                    },
    	                    itemStyle: { normal: { areaStyle: { type: 'default' } } },
    	                    data: [{
    	                        value: [60, 73, 85, 40],
    	                        name: '某软件'
    	                    }]
    	                },
    	                {
    	                    type: 'radar',
    	                    radarIndex: 1,
    	                    data: [{
    	                            value: [85, 90, 90, 95, 95],
    	                            name: '某主食手机'
    	                        },
    	                        {
    	                            value: [95, 80, 95, 90, 93],
    	                            name: '某水果手机'
    	                        }
    	                    ]
    	                },
    	                {
    	                    type: 'radar',
    	                    radarIndex: 2,
    	                    itemStyle: { normal: { areaStyle: { type: 'default' } } },
    	                    data: [{
    	                            name: '降水量',
    	                            value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],
    	                        },
    	                        {
    	                            name: '蒸发量',
    	                            value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
    	                        }
    	                    ]
    	                }
    	            ]
    	        };
    	        echartsB.setOption(optionB);
    	        var echartsA = echarts.init(document.getElementById('tpl-echarts-A'));
    	        option = {

    	            tooltip: {
    	                trigger: 'axis',
    	            },
    	            legend: {
    	                data: ['邮件', '媒体', '资源']
    	            },
    	            grid: {
    	                left: '3%',
    	                right: '4%',
    	                bottom: '3%',
    	                containLabel: true
    	            },
    	            xAxis: [{
    	                type: 'category',
    	                boundaryGap: true,
    	                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    	            }],

    	            yAxis: [{
    	                type: 'value'
    	            }],
    	            series: [{
    	                    name: '邮件',
    	                    type: 'line',
    	                    stack: '总量',
    	                    areaStyle: { normal: {} },
    	                    data: [120, 132, 101, 134, 90, 230, 210],
    	                    itemStyle: {
    	                        normal: {
    	                            color: '#59aea2'
    	                        },
    	                        emphasis: {

    	                        }
    	                    }
    	                },
    	                {
    	                    name: '媒体',
    	                    type: 'line',
    	                    stack: '总量',
    	                    areaStyle: { normal: {} },
    	                    data: [220, 182, 191, 234, 290, 330, 310],
    	                    itemStyle: {
    	                        normal: {
    	                            color: '#e7505a'
    	                        }
    	                    }
    	                },
    	                {
    	                    name: '资源',
    	                    type: 'line',
    	                    stack: '总量',
    	                    areaStyle: { normal: {} },
    	                    data: [150, 232, 201, 154, 190, 330, 410],
    	                    itemStyle: {
    	                        normal: {
    	                            color: '#32c5d2'
    	                        }
    	                    }
    	                }
    	            ]
    	        };
    	        echartsA.setOption(option);
    	    }
    	}
    	
        var dataType = "index";
        console.log(dataType);
        for (key in pageData) {
            if (key == dataType) {
                pageData[key]();
            }
        }
    });

    function login() {
    	
    	var username = $("#username").val();
    	var password = $("#password").val();
    	var data ={username:username,password:password};
        $.ajax({
            type: "POST",
            url: "login",
            data: data,
            success: function (result) {
                if (result.success) {
                    parent.location.href = 'admin/index';
                } else {
                    alert(result.msg);
                }
            }
        });
    }


</script>
</body>

</html>